<style>
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }
  .ql-snow .ql-tooltip a.ql-action::after{
    content: '修改';
  }
  .ql-snow .ql-tooltip a.ql-remove::before{
    content: '保存';
  }
  .ql-snow .ql-tooltip::before{
    content: '链接地址：';
  }
</style>
<template>
    <div class="main">
      <!-- 左侧 -->
      <div class="left">
        <div class="l_top"><img src="../../assets/imgs/1-3.png"/></div>
        <div class="l_content">
          <!-- 总览简报 -->
          <div class="lc_con">
            <span class="title">总览简报</span>
            <div :class="leftIndex==1?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(1)">
              <i class="icons icon1"></i>
              <span class="options_text">关注</span>
            </div>
            <div :class="leftIndex==2?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(2)">
              <i class="icons icon2"></i>
              <span class="options_text">生产排程</span>
            </div>
          </div>
          <!-- 解决问题 -->
          <div class="lc_con">
            <span class="title">解决问题</span>
            <div :class="leftIndex==3?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(3)">
              <i class="icons icon3"></i>
              <span class="options_text">所有问题</span>
            </div>
            <div :class="leftIndex==4?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(4)">
              <i class="icons icon4"></i>
              <span class="options_text">重要问题</span>
            </div>
          </div>
          <!-- 发现问题 -->
          <div class="lc_con">
            <span class="title">发现问题</span>
            <div :class="leftIndex==5?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(5)">
              <i class="icons icon5"></i>
              <span class="options_text">采购管理</span>
            </div>
            <div :class="leftIndex==6?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(6)">
              <i class="icons icon6"></i>
              <span class="options_text">产品实现</span>
            </div>
            <div :class="leftIndex==7?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(7)">
              <i class="icons icon7"></i>
              <span class="options_text">物流过程</span>
            </div>
            <div :class="leftIndex==8?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(8)">
              <i class="icons icon8"></i>
              <span class="options_text">交付管理</span>
            </div>
            <div :class="leftIndex==9?'lcc_options lcc_options_active':'lcc_options'" @click="chooseOptions(9)">
              <i class="icons icon9"></i>
              <span class="options_text">设备与工装管理</span>
            </div>
            <div class="lcc_options cantChoose">
              <i class="icons icon10"></i>
              <span class="options_text">环境与健康安全</span>
            </div>
          </div>
          <!-- 管理 -->
          <div class="lc_con">
            <span class="title">管理</span>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <!-- 右侧上方实时数据更新 -->
        <div class="right_top">
          <div class="rt_left">
            <div class="rtl_title">实时库存</div>
            <div class="rtl_cons" v-for="item in timeList">
              <span class="rtl_cons_top">{{item.value}}</span>
              <span class="rtl_cons_bottom">{{item.name}}</span>
            </div>
            <div class="time">最新更新时间：{{updateTime}}</div>
          </div>
          <div class="rt_right">
            <div class="rtr_icon">
              <i class="rtri_icon"></i>
              <span>帮助</span>
            </div>
            <div class="rtr_icon">
              <i class="rtri_userImg">{{userName.substring(userName.length - 1,userName.length)}}</i>
              <span>{{userName}}</span>
              <el-dropdown trigger="click" @command="clearAll">
                <span class="el-dropdown-link">
                  下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <!-- 右侧下方内容区域 -->
        <div class="right_bottom">
          <router-view></router-view>
        </div>
      </div>
      <!-- 公共遮挡层 -->
      <div class="public_back" v-if="public_backShow">
        <div class="loading"><div class="loadingLogo"><img src="../../assets/imgs/loding_1.png"/></div><span class="text">数据加载中,请稍后...</span></div>
      </div>
    </div>
</template>

<script>
  import allQuestionIndex from '../content/allQuestion/allQuestionIndex'
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: "index",
    data() {
      return{
        timeList:[],
        updateTime:'',
        userName: '',
        leftIndex: ''
      }
    },
    computed:{
      ...mapGetters([
        'public_backShow'
      ])
    },
    created() {
      let self = this
      self.getInventor()
      setInterval(() => {
        self.getInventor()
      },300000)
      //获取产品列表
      self.$http.get(self.conURL + 'mongo/api/docs/dictitem/product').then(res => {
        let productList = res.data
        productList.unshift('所有产品')
        self.upstate({key:'productList',val:productList})
      })
      //获取指标列表
      self.$http.get(self.conURL + 'mongo/api/docs/dictitem/target').then(res => {
        let targetList = res.data
        self.upstate({key:'targetList',val:targetList})
      })
      //获取问题来源列表
      self.$http.get(self.conURL + 'mongo/api/docs/dictitem/dataSource').then(res => {
        let dataSourceList = res.data
        self.upstate({key:'dataSourceList',val:dataSourceList})
      })
      //获取问题分类列表
      self.$http.get(self.conURL + 'mongo/api/docs/dictitem/proposalType').then(res => {
        let proposalList = res.data
        self.upstate({key:'proposalList',val:proposalList})
      })
    },
    mounted() {
      let self = this
      self.userName = localStorage.getItem('firstName')
      self.leftIndex = localStorage.getItem('leftIndex')
    },
    methods:{
      ...mapActions([
        'upstate'
      ]),
      //选择选项
      chooseOptions(index){
        let self = this
        self.upstate({key:'showNewEight',val:false})
        self.upstate({key:'showRichText',val:false})
        self.upstate({key:'showAddMember',val:false})
        self.upstate({key:'showJointly',val:false})
        self.upstate({key:'createQuestionOpen',val:false})
        localStorage.setItem('leftIndex',index)
        self.leftIndex = index
        if (self.leftIndex == 1){
          this.$router.push('/index')
        } else if (self.leftIndex == 2) {
          this.$router.push('/index/scheduling')
        } else if (self.leftIndex == 3) {
          this.$router.push('/index/allQuestion')
        } else if (self.leftIndex == 4) {
          this.$router.push('/index/important')
        } else if (self.leftIndex == 5) {
          this.$router.push({
            path: '/index/purchase',
            query: {type: '采购管理'}
          })
        } else if (self.leftIndex == 6) {
          this.$router.push({
            path: '/index/purchase',
            query: {type: '产品实现'}
          })
        } else if (self.leftIndex == 7) {
          this.$router.push({
            path: '/index/purchase',
            query: {type: '物流过程'}
          })
        } else if (self.leftIndex == 8) {
          this.$router.push({
            path: '/index/purchase',
            query: {type: '交付管理'}
          })
        } else if (self.leftIndex == 9) {
          this.$router.push({
            path: '/index/purchase',
            query: {type: '设备和工装'}
          })
        }
      },
      //时间戳转换时间
      changeTime(time){
        let self = this
        if (time != undefined){
          let timestamp3 = time;
          let newDate = new Date();
          newDate.setTime(timestamp3 * 1000);
          let year = newDate.getFullYear();
          let month = (newDate.getMonth()+1) < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1 ;
          let date = newDate.getDate() < 10? '0' + newDate.getDate() : newDate.getDate();
          let hour = newDate.getHours() < 10? '0' + newDate.getHours() : newDate.getHours();
          let minute = newDate.getMinutes() < 10? '0' + newDate.getMinutes() : newDate.getMinutes();
          let second = newDate.getSeconds() < 10? '0' + newDate.getSeconds() : newDate.getSeconds();
          return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
        }
      },
      //退出登录
      clearAll(){
        let self = this
        localStorage.clear();
        self.$router.push('/')
      },
      //实时刷新库存数据
      getInventor(){
        let self = this
        self.$http.get(self.conURL + 'pm/api/inventor').then(res => {
          self.timeList = res.data.inventory
          self.updateTime = self.changeTime(res.data.updatetime)
        })
      }
    },
    components:{
      allQuestionIndex,
    }
  }
</script>

<style lang="less">
  .main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    /* 左侧 */
    .left{
      width: 300px;
      height: 100%;
      background: url(../../assets/imgs/1-1.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      .l_top{
        width: 100%;
        height: 80px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .l_content{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding-left: 38px;
        box-sizing: border-box;
        .lc_con{
          display: flex;
          flex-direction: column;
          padding-top: 13px;
          box-sizing: border-box;
          position: relative;
          .title{
            font-size: 14px;
            color: #9bb4ee;
            line-height: 14px;
            margin-bottom: 8px;
          }
          .lcc_options{
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 50px;
            padding-left: 19px;
            box-sizing: border-box;
            cursor: pointer;
            .options_text{
              font-size: 18px;
              color: #fff;
              line-height: 50px;
            }
            .icons{
              width: 22px;
              height: 22px;
              margin-right: 20px;
              margin-top: auto;
              margin-bottom: auto;
              background: url(../../assets/imgs/1-2.png) no-repeat;
            }
            .icon1{
              background-position: -10px -22px;
            }
            .icon2{
              background-position: -9px -812px;
            }
            .icon3{
              background-position: -9px -65px;
            }
            .icon4{
              background-position: -9px -117px;
            }
            .icon5{
              background-position: -10px -475px;
            }
            .icon6{
              background-position: -10px -422px;
            }
            .icon7{
              background-position: -10px -685px;
            }
            .icon8{
              background-position: -10px -727px;
            }
            .icon9{
              background-position: -10px -579px;
            }
            .icon10{
              background-position: -10px -768px;
            }
          }
          .lcc_options:last-child{
            margin-bottom: 6px;
          }
          .cantChoose{
            cursor: default;
            .options_text{
              color: #ccc;
            }
          }
          .lcc_options_active{
            background: #2e6bb6;
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
          }
        }
        .lc_con:after{
          display: block;
          content: '';
          width: 219px;
          height: 1px;
          background: #405ea9;
          position: absolute;
          bottom: 0;
          left: 3px;
        }
        .lc_con:first-child{
          margin-top: 13px;
        }
        .lc_con:nth-child(3):after{
          display: none;
        }
        .lc_con:nth-child(4):after{
          display: none;
        }
        .lc_con:nth-child(4){
          .title{
            color: #ccc;
            cursor: pointer;
          }
        }
      }
    }
    /* 右侧 */
    .right{
      width: calc(100% - 300px);
      height: 100%;
      display: flex;
      flex-direction: column;
      /* 右侧上方实时数据更新 */
      .right_top{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 79px;
        padding-left: 39px;
        padding-right: 52px;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
        .rt_left,.rt_right{
          display: flex;
          flex-direction: row;
          height: 100%;
        }
        .rt_left{
          text-align: center;
          .rtl_title{
            width: 118px;
            font-size: 20px;
            color: #666666;
            position: relative;
            line-height: 80px;
          }
          .rtl_title:after{
            position: absolute;
            content: '';
            display: block;
            width: 1px;
            height: 40px;
            background: #e5e5e5;
            right: -1px;
            top: 20px;
          }
          .rtl_cons{
            width: 105px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            padding: 0 15px;
            .rtl_cons_top{
              font-size: 24px;
              color: #3384dd;
            }
            .rtl_cons_bottom{
              font-size: 14px;
              color: #666666;
            }
          }
          .rtl_cons:after{
            position: absolute;
            content: '';
            display: block;
            width: 1px;
            height: 40px;
            background: #e5e5e5;
            right: -1px;
            top: 20px;
          }
          .time{
            font-size: 14px;
            color: #999999;
            line-height: 80px;
            margin-left: 20px;
          }
        }
        .rt_right{
          display: flex;
          flex-direction: row;
          .rtr_icon{
            display: flex;
            flex-direction: row;
            .rtri_icon{
              width: 28px;
              height: 28px;
              background: url(../../assets/imgs/1-2.png) no-repeat;
              background-position: -56px -21px;
              margin: auto 12px auto 0;
            }
            .rtri_userImg{
              width: 36px;
              height: 36px;
              border: 2px solid #0f76c8;
              border-radius: 50%;
              margin: auto 10px auto 0;
              text-align: center;
              line-height: 36px;
              font-size: 16px;
              color: #7f7f7f;
              font-style: normal;
            }
            span{
              font-size: 16px;
              color: #7f7f7f;
              line-height: 80px;
            }
          }
          .rtr_icon:first-child{
            margin-right: 47px;
          }
          .rtr_icon:last-child{
            cursor: pointer;
            position: relative;
            .el-dropdown{
              width: 110%;
              height: 80%;
              position: absolute;
              right: -8px;
              top: 0;
              .el-dropdown-link{
                opacity: 0;
              }
            }
          }
        }
      }
      /* 右侧下方内容区域 */
      .right_bottom{
        width: 100%;
        height: calc(100% - 80px);
        overflow-y: scroll;
        background: #f8f8f8;
      }
    }
    /* 公共遮挡层 */
    .public_back{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 998;
    }
    .loading{
      max-width: 234px;
      height: 40px;
      background: #000000;
      color: #fff;
      opacity: .6;
      padding: 10px 18px;
      box-sizing: border-box;
      z-index: 999;
      margin: auto;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 5px;
      display: flex;
      flex-direction: row;
      .loadingLogo{
        width: 20px;
        height: 20px;
        margin-right: 10px;
        img{
          width: 100%;
          height: 100%;
          animation: myRtate 3s infinite ;
          -moz-animation: myRtate 3s infinite ;	/* Firefox */
          -webkit-animation: myRtate 3s infinite ;	/* Safari 和 Chrome */
          -o-animation: myRtate 3s infinite ;	/* Opera */
        }
        @keyframes myRtate
        {
          from {transform:rotate(0deg);}
          to {transform:rotate(360deg);}
        }

        @-moz-keyframes myRtate /* Firefox */
        {
          from {transform: rotate(0deg);}
          to {transform: rotate(360deg);}
        }

        @-webkit-keyframes myRtate /* Safari 和 Chrome */
        {
          from {transform: rotate(0deg);}
          to {transform: rotate(360deg);}
        }

        @-o-keyframes myRtate /* Opera */
        {
          from {transform: rotate(0deg);}
          to {transform: rotate(360deg);}
        }
      }
      .text{
        line-height: 17px;
      }
    }
  }
</style>
